<template>
	<div class="epsoide">
		<div class="index-container">
	    <div class="plain">No.</div>
	    <div class="index">{{Index}}</div>
	    <div class="vertical-line"></div>
	  </div>
	  <div class="date">
	    <div class="month">{{month}}</div>
	    <div class="year">{{year}}</div>
	  </div>
	</div>
</template>
<script>
export default{
	name:'epsoide',
	data(){
		return{
			year:0,
			month:'',
			Index:'',
			months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
		}
	},
	props:{
		index:Number
	},
	created(){
		let date=new Date()
		let year=date.getFullYear()
		let month=date.getMonth()
		this.year=year
		this.month=this.months[month]
	},
	watch:{
		index(){
			let index=this.index<10?'0'+this.index:this.index
			this.Index=index
		}
	}
}
</script>
<style lang="stylus" scoped>
.index{
  font-size:30px;
  font-weight:800;
  margin-right:7px;
}
.vertical-line{
  margin-right:7px;
  height:22px;
  border-left:1px solid black;
}
.plain{
  font-size:16px;
}
.epsoide{
  display:inline-flex;
  flex-direction: row;
  line-height: 30px;
  /* justify-content: flex-end; */
   /* align-items: baseline;       */
}
.index-container{
  display:flex;
  flex-direction: row;
  align-items: baseline;      
}
.date{
  display: flex;
  flex-direction: column;
  justify-content: center; 
  /* align-items: baseline; */
   /* line-height:30px;   */
}
.month{
  font-size:12px;
  line-height:12px; 
  padding-bottom: 2px; 
  margin-right:2rpx;
  /* padding-right:4rpx; */
}
.year{
  font-size:10px;
  line-height:10px; 
  padding-bottom:3px;   
}

</style>